<script setup lang="ts">
import {getCurrentInstance, reactive, ref} from "vue";
import {Message, type TableData} from "@arco-design/web-vue";
import {type Menu2ImageRsp, menuUpdateAxios, type MenuUpdateReq} from "@/api/menu_api";
import {imageListAxios, type ImagesListRsp} from "@/api/image_api";

const updateData = reactive<MenuUpdateReq & { abstractStr: string }>({
  id: 0,
  title: "",
  path: "",
  slogan: "",
  abstract: [],
  abstractStr: "",
  abstract_time: 0,
  image_time: 0,
  sort: 0,
  image_id_list: [],
})

const visible = ref(false);

const mitt = getCurrentInstance()

const formRef = ref()

const imageList = ref<ImagesListRsp[]>([])

mitt?.proxy?.$Bus.on('openUpdateModal', (record) => {
  visible.value = true
  let record1 = record as TableData;
  updateData.id = record1.id
  updateData.title = record1.title
  updateData.path = record1.path
  updateData.slogan = record1.slogan

  let abstract = record1.abstract as string[];

  updateData.abstractStr = abstract.join("\n")

  updateData.abstract_time = record1.abstract_time
  updateData.image_time = record1.image_time
  updateData.sort = record1.sort

  let imageIdList = record1.image_list as Menu2ImageRsp[]
  updateData.image_id_list = imageIdList.map((item, index) => {
    return item.image_id
  })
})

async function updateMenu() {
  // val是undefined则表示校验通过
  let val = await formRef.value.validate()
  if (val) {
    return false
  }
  let rsp = await menuUpdateAxios(updateData);
  if (rsp.code !== 0) {
    Message.error("修改失败")
    return false
  }
  Message.success("修改成功")
  mitt?.proxy?.$Bus.emit("refresh")
  close()
}

function close() {
  visible.value = false
}

async function queryImageList() {
  let list = await imageListAxios({page: 1, limit: 1000});
  imageList.value = list.data.list
}

queryImageList()

</script>

<template>
  <a-modal title="编辑菜单" :visible="visible" :on-before-ok="updateMenu" @cancel="close">
    <a-form
        ref="formRef"
        :model="updateData">

      <a-form-item field="title" label="菜单名称" :rules="[{required:true,message:'请输入菜单名称'}]"
                   validate-trigger="blur">
        <a-input v-model="updateData.title" placeholder="菜单名称"></a-input>
      </a-form-item>

      <a-form-item field="path" label="菜单路劲" :rules="[{required:true,message:'请输入菜单路劲'}]"
                   validate-trigger="blur">
        <a-input v-model="updateData.path" placeholder="菜单路劲"></a-input>
      </a-form-item>

      <a-form-item field="slogan" label="slogan">
        <a-input v-model="updateData.slogan" placeholder="slogan"></a-input>
      </a-form-item>

      <a-form-item field="abstractStr" label="菜单简介">
        <a-textarea v-model="updateData.abstractStr" placeholder="菜单简介多行输入"
                    :auto-size="{ minRows: 2,maxRows: 2 }">

        </a-textarea>
        <template #extra>
          <div>菜单的简介</div>
        </template>
      </a-form-item>

      <a-form-item field="abstract_time" label="菜单简介T">
        <a-input-number v-model="updateData.abstract_time" placeholder="菜单简介切换时间"></a-input-number>
        <template #extra>
          <div>简介切换时间 0表示不切换</div>
        </template>
      </a-form-item>

      <a-form-item field="sort" label="序号">
        <a-input-number v-model="updateData.sort" placeholder="序号"></a-input-number>
        <template #extra>
          <div>序号越小越前</div>
        </template>
      </a-form-item>

      <a-form-item field="image_time" label="imageT">
        <a-input-number v-model="updateData.image_time" placeholder="图片切换时间"></a-input-number>
        <template #extra>
          <div>图片切换时间 0表示不切换</div>
        </template>
      </a-form-item>

      <a-form-item field="image_id_list" label="image">
        <a-select multiple v-model="updateData.image_id_list" placeholder="选择图片">
          <a-option v-for="item in imageList" :key="item.id" :value="item.id">
            <div class="banner_image_div">
              <img height="40" :src="item.path" alt=""> {{ item.name }}
            </div>
          </a-option>
        </a-select>
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<style scoped>

</style>
